<script setup>
import { ref, onActivated, onDeactivated } from "vue";

const count = ref(0)

// 一个持续存在的组件可以通过 onActivated() 和 onDeactivated() 注册相应的两个状态的生命周期钩子：
onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  console.log(111111);
})
onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
  console.log(222);
})
</script>

<template>
  <div>Current component: A</div>
  count: {{ count }}
  <button @click="count++">+</button>
</template>

<style>
</style>